<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="./css/jquery.jsonview.css">

    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body class="layui-anim layui-anim-up">
<div class="x-nav">
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:refresh()" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <xblock>
        <button class="layui-btn" onclick="request_listen_add()"><i class="layui-icon"></i>添加监听</button>
    </xblock>
    <table class="layui-table">
        <thead>
        <tr>
            <th>id</th>
            <th>网关</th>
            <th>路径</th>
            <th>时间</th>
            <th>ip</th>
            <th width="25%">操作</th>
        </tr>
        </thead>
        <tbody id="domain_list">

        </tbody>
    </table>
</div>
<div id="add_request_listen_html" style="display: none">
    <div class="x-body">
        <form class="layui-form">
            <div class="layui-form-item">
                <label for="domain_name" class="layui-form-label">
                    <span class="x-red">*</span>监听路径
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="listen_path" name="listen_path" lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label">
                </label>
                <button class="layui-btn" lay-submit lay-filter="add_sub">提交</button>
            </div>
        </form>

    </div>
</div>

<div id="show_request_info_html" style="display: none">
    <div class="x-body">
        <div id="json_data">

        </div>
    </div>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>
<script type="text/javascript" src="./js/admin.js"></script>
<script type="text/javascript" src="./js/jquery.jsonview.js"></script>

<script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script>

<script>
    var domain_id = "";
    var all_request_data = [];
    function refresh() {
        location.replace(location.href);
    }

    function request_copy() {
        x_admin_show('添加路径','./path-add.html'+'?domain_id='+domain_id);
    }

    function request_listen_add() {
        layer.open({
            area: ['500px', '200px'],
            type: 1,
            id: "add_request_listen",
            content: $("#add_request_listen_html"),
        });
    }

    function request_info(obj, index) {
        $("#json_data").JSONView(all_request_data[index], {nl2br: true});
        layer.open({
            area: ['90%', '90%'],
            type: 1,
            id: "show_request_info",
            content: $("#show_request_info_html"),
        });
    }


    layui.use(['form','layer'], function(){
        var form = layui.form,layer = layui.layer;
        $(document).ready(function(){
            domain_id = getUrlParam("domain_id");
            if(domain_id == "" || domain_id == null) {
                layer.alert("无域名id数据", {icon: 2}, function () {
                    x_admin_close();
                });
            }

            request("GET", HGW_MANAGE_API + "requests-copy/", "json", false, {},
                function(rsp) {
                    var list_html = "";
                    if(rsp.status == 1) {
                        all_request_data = rsp.data;
                        for(var i=0; i< rsp.data.length; i++) {
                            list_html += "<tr class=\"text-c\">"
                            list_html += "<td>"+rsp.data[i].id+"</td>"
                            list_html += "<td>"+rsp.data[i].ser_name+"</td>"
                            list_html += "<td>"+rsp.data[i].req_path+"</td>"
                            list_html += "<td>"+rsp.data[i].req_time+"</td>"
                            list_html += "<td>"+rsp.data[i].req_ip+"</td>"
                            list_html += "<td class=\"f-14 td-manage\"> " +
                                "<a onClick=\"request_info(this,"+i+")\" title=\"编辑\">详情" +
                                "</a>&nbsp;&nbsp;&nbsp;&nbsp;" +
                                "</td>"
                            list_html += "</tr>"
                        }
                        all_request_data = rsp.data;
                    }
                    $("#domain_list").html(list_html);
                    $('.layui-table').dataTable({
                        "bStateSave": true,//状态保存
                        "pading":false,
                        "searching": false,
                        "lengthChange" : false,
                    });
                });
        });

        form.on('submit(add_sub)', function(data){
            var listen_path = $("#listen_path").val();
            var params = {
                "listen_path": listen_path,
            };
            request("POST", HGW_MANAGE_API + "requests-listen/"+domain_id+"/", "json", false, params,
                function (rsp) {
                    if (rsp.status == 1) {
                        layer.alert("添加成功", {icon: 6}, function () {
                            refresh();
                        });
                    } else {
                        layer.alert("添加失败，请核对内容");
                    }
                });
            return false;
        });
    });

</script>
</body>

</html>